<template>
	<view>
		<view class="searchPage-history">
			<view class="searchPage-history-title">
				<text>历史搜索</text>
				<image src="https://mcdn.chatgk.com/xcx/static/images/homeSearch/ljt8.png" mode=""
					@tap="removeStorage"></image>
			</view>
			<view class="searchPage-history-ul">
				<view class="searchPage-history-li" v-for="(item,index) in historyData" :key="index"
					@tap="clickhistory(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "historyList",
		props: {
			historyData: {
				type: Array,
				default: () => {
					return []
				}
			},
			historyDataValue: {
				type: String,
				default: () => {
					return 'historyData' // 设置默认参数
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			// 改变状态历史数据 进来则判断
			historychange() {
				this.historyData = uni.getStorageSync(`${this.historyDataValue}`).searchdata || []
				if (this.historyData.length > 0) {
					this.historyDataState = 1
				} else {
					historyData
					this.historyDataState = 0
				}
			},
			//点击查询方法
			clickhot(data) {
				let newhistoryData = {
					searchdata: uni.getStorageSync(`${this.historyDataValue}`).searchdata || [],
					searchType: uni.getStorageSync(`${this.historyDataValue}`).searchType || []
				}
				if (data) {
					const indexBot = newhistoryData.searchdata.indexOf(data)
					if (indexBot != -1) {
						newhistoryData.searchdata.splice(indexBot, 1)
						newhistoryData.searchdata.unshift(data)
					} else {
						newhistoryData.searchdata.unshift(data)
					}
				}
				uni.setStorageSync(`${this.historyDataValue}`, newhistoryData)
			},
			removeStorage() { // 清除数据
				uni.removeStorageSync(`${this.historyDataValue}`) // 清除缓存
				this.historyDataState = 0

			},
			clickhistory(data) { // 点击历史数据
				this.$emit('clickhistory', data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchPage-history {
		width: 100%;
		padding-left: 32rpx;
		margin-top: 56rpx;

		.searchPage-history-title {
			height: 60rpx;
			width: 100%;

			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 24rpx;
				font-weight: 600;
				color: #999999;
				line-height: 34rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
			}

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 100rpx;
			}
		}

		.searchPage-history-ul {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 26rpx;

			.searchPage-history-li {

				height: 60rpx;
				border-radius: 36rpx;
				background-color: #F8F8F8;

				font-size: 24rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #999999;
				line-height: 60rpx;
				text-align: center;
				flex-shrink: 0;
				padding: 0 42rpx;
				margin: 10rpx 20rpx 10rpx 0;
			}
		}

	}
</style>